<!--
<template>
  <div :class="$style['stats-courses-frequence']">
    <div class="s-tit">教师教研活动评比</div>
    <div class="s-box">
      <div v-for="item of list" class="s-item" :key="item.user_id">
        <dl>
          <dt>
            <span class="s-name">{{item.user_name}}</span>
            <span class="s-time">{{item.listen_num*1 + item.teaching_num*1}}次</span>
          </dt>
          <dd>
            <div class="s-child">
              <span class="s-n">公开课</span>
              <span class="s-t">{{item.listen_num}}次</span>
              <div class="s-prog-b">
                <div class="s-prog">
                  <div class="s-fill"></div>
                </div>
              </div>

            </div>
            <div class="s-child c2">
              <span class="s-n">公开课</span>
              <span class="s-t">{{item.teaching_num}}次</span>
              <div class="s-prog-b">
                <div class="s-prog">
                  <div class="s-fill"></div>
                </div>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
-->

<script>
import MarqueeTextDown from '@/modules/marquee-text/MarqueeTextDown'
export default {
  components: {
    MarqueeTextDown
  },
  render () {
    let { $style } = this
    let vlist = []

    this.list.forEach(item => {
      // 排除这些老师
      if ({
        447637: 1, // 测试01
        447638: 1, // 测试02
        447639: 1, // 测试03
        10113: 1 // 学校管理员
      }[item.user_id]) return

      let listenNum = item.listen_num
      let teachingNum = item.teaching_num
      let total = listenNum * 1 + teachingNum * 1
      vlist.push(
        <div class="s-item" key={item.user_id}>
          <dl>
            <dt>
              <span class="s-name">{item.user_name}</span>
              <span class="s-time">{total}次</span>
            </dt>
            <dd>
              <div class="s-child">
                <span class="s-n">公开课</span>
                <span class="s-t">{listenNum}次</span>
                <div class="s-prog-b">
                  <div class="s-prog">
                    <div class="s-fill" style={{ width: listenNum / total * 100 + '%' }}></div>
                  </div>
                </div>
              </div>
              <div class="s-child c2">
                <span class="s-n">听课</span>
                <span class="s-t">{teachingNum}次</span>
                <div class="s-prog-b">
                  <div class="s-prog">
                    <div class="s-fill" style={{ width: teachingNum / total * 100 + '%' }}></div>
                  </div>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      )
    })

    return (
      <div class={$style['stats-courses-frequence']}>
        <div class="s-tit">教师教研活动评比</div>
        <div class="s-box"><MarqueeTextDown class={$style['marquee-down']} ref="vMarqueeTextDown">{vlist}</MarqueeTextDown></div>
      </div>
    )
  },
  props: {
    d: Object
  },
  computed: {
    list () {
      return this.d.course_frequence_list || []
    }
  },
  watch: {
    d () {
      this.$nextTick(() => {
        this.$refs.vMarqueeTextDown.change()
      })
    }
  }
}
</script>

<style module>
.marquee-down {
  height: 100%;
}
.stats-courses-frequence :global {
  width: 220px;
  position: fixed;
  top: 0;
  bottom: 0;

  .s-tit {
    height: 50px;
    background-color: #1f8061;
    font-size: 18px;
    color: #fff;
    line-height: 2.6;
    text-align: center;
  }
  .s-box {
    background-color: #aad2c5;
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    /* overflow: auto; */
  }

  .s-item {
    padding: 0 15px 15px;
  }
  .s-item:first-child {
    padding-top: 15px;
  }
  dl {
    background-color: #fff;
    border-radius: 6px;
    padding: 12px;
  }
  dd {
    padding: 0 2px;
  }
  dt {
    padding-bottom: 4px;
  }
  .s-name {
    font-size: 16px;
    color: #666;
  }
  .s-time {
    font-size: 16px;
    color: #999;
    padding-right: 2px;
    float: right;
  }

  .s-child {
    height: 24px;
  }

  .s-n {
    float: left;
    width: 38px;
    padding-right: 5px;
    font-size: 12px;
    color: #999;
    text-align-last: justify;
  }

  .s-t {
    float: right;
    width: 30px;
    font-size: 12px;
    color: #999;
  }
  .s-prog-b {
    margin-left: 43px;
    margin-right: 35px;
    padding-top: 10px;
  }
  .s-prog {
    height: 7px;
    background-color: #d9d9d9;
    border-radius: 3px;
    overflow: hidden;
  }
  .s-fill {
    width: 0;
    height: 12px;
    background-color: #eda315;
  }
  .c2 .s-fill {
    background-color: #2fcc9a;
  }
}
</style>
